<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>111</li>
        <li>222</li>
    </ol>
    <script>
        // 创建li元素
        const liObj = document.createElement("li");
        // 获取ol元素
        const olObj = document.querySelector("ol");

        // 创建文本节点
        const textObj = document.createTextNode("333");
        liObj.appendChild(textObj);
        console.log(liObj);

        //创建一个属性节点
        const attrNode = document.createAttribute("id");
        attrNode.value = "3";
        // liObj.setAttribute(attrNode,"3");    //这样写不可以。
        liObj.setAttribute("name", "3333");//以属性名，属性值的形式进行设置
        liObj.setAttributeNode(attrNode);//以节点的形式进行属性的设置

        olObj.appendChild(liObj);
        console.log(olObj);
        console.log(attrNode.nodeType); //Node.ATTRIBUTE_NODE
    </script>
</body>

</html>